/*
 * @Description: 新增档案征集
 * @Author: Zzt
 * @Date: 2022-12-28 16:35:13
 * @LastEditTime: 2022-12-29 09:40:08
 */
import { Button, Checkbox, Form, Modal, Space } from 'antd';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { useMemo, useState } from 'react';
import CollectionFrom from '../dialogs/CollectionFrom';

const AddBtn = () => {
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();

  const onCancel = () => {
    setVisible(false);
  };

  // 提交表单
  const submitFunc = () => {
    form.submit();
  };

  // 新增档案类型
  const onFinish = (vals: any) => {
    console.log('新增显示', vals);
    setVisible(false);
  };

  const onChange = (event: CheckboxChangeEvent) => {
    console.log(`checked = ${event.target.checked}`);
  };
  return (
    <>
      <Button onClick={() => setVisible(true)}>新增</Button>
      {useMemo(
        () => (
          <Modal
            destroyOnClose
            title="新增征集条目"
            visible={visible}
            width={800}
            onCancel={() => {
              onCancel();
            }}
            footer={[
              <Checkbox onChange={onChange} key="check" style={{ float: 'left' }}>
                自动保存
              </Checkbox>,
              <Button
                key="back"
                onClick={() => {
                  onCancel();
                }}
              >
                取消
              </Button>,
              <Button key="submit" type="primary" onClick={submitFunc}>
                确定
              </Button>
            ]}
          >
            <Space>
              <Button>撤销修改</Button>
              <Button onClick={() => form.resetFields()}>清空</Button>
            </Space>
            <hr></hr>
            <Form form={form} onFinish={onFinish} labelAlign="left" labelWrap={true} colon={false}>
              <CollectionFrom />
            </Form>
          </Modal>
        ),
        [visible]
      )}
    </>
  );
};
export default AddBtn;
